<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-14 09:28:55
 * @LastEditTime : 2022-09-14 10:06:46
 * @FilePath     : \传值\vue3\子传父\第二种：v-model\ChildComponent.vue
-->
<template>
    <h3>我是子组件</h3>

    <div>
      <input v-model="a" placeholder="请输入"/>
      <button @click="handleAdd" type="button">添加</button>
    </div>
  </template>
  <script setup>
  import { ref } from 'vue'
  const a = ref('')
  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  })
  const emits = defineEmits(['update:list'])
  // 添加操作
  const handleAdd = () => {
    const arr = props.list
    arr.push(a.value)
    emits('update:list', arr)   //update:*是Vue中的固定写法，*表示props中的某个属性名
    a.value = ''
  }
  </script>